<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>实时交通仪表盘</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../libs/layui/css/layui.css" media="all">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        .dashboard-container {
            padding: 20px;
            background-color: #f2f2f2;
            min-height: 100vh;
        }
        
        .status-card {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .chart-container {
            height: 400px;
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div class="dashboard-container">
        <div class="layui-row layui-col-space15">
            <!-- 实时状态卡片 -->
            <div class="layui-col-md12">
                <div class="status-card">
                    <h2><i class="layui-icon layui-icon-chart"></i> 实时交通状态</h2>
                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-md3">
                            <div class="layui-card">
                                <div class="layui-card-body">
                                    <h3>总车流量</h3>
                                    <p class="layui-text-large layui-text-blue">1,234</p>
                                    <small>辆/小时</small>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <div class="layui-card">
                                <div class="layui-card-body">
                                    <h3>平均车速</h3>
                                    <p class="layui-text-large layui-text-green">45</p>
                                    <small>km/h</small>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <div class="layui-card">
                                <div class="layui-card-body">
                                    <h3>拥堵指数</h3>
                                    <p class="layui-text-large layui-text-orange">2.3</p>
                                    <small>轻度拥堵</small>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <div class="layui-card">
                                <div class="layui-card-body">
                                    <h3>信号周期</h3>
                                    <p class="layui-text-large layui-text-red">120</p>
                                    <small>秒</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 交通流图表 -->
            <div class="layui-col-md8">
                <div class="chart-container">
                    <h3><i class="layui-icon layui-icon-chart"></i> 各交叉口实时车流量对比</h3>
                    <div id="trafficChart" style="height: 300px;"></div>
                </div>
            </div>
            
            <!-- 流量趋势 -->
            <div class="layui-col-md4">
                <div class="chart-container">
                    <h3><i class="layui-icon layui-icon-chart"></i> 过去一小时流量趋势</h3>
                    <div id="trendChart" style="height: 300px;"></div>
                </div>
            </div>
        </div>
    </div>

    <script src="../../libs/layui/layui.js"></script>
    <script>
        layui.use(['element'], function(){
            var element = layui.element;
            
            // 初始化图表
            initTrafficChart();
            initTrendChart();
            
            // 实时数据更新逻辑
            setInterval(function() {
                updateRealTimeData();
            }, 5000); // 每5秒更新一次
            
            console.log('实时交通仪表盘页面已加载');
        });
        
        // 初始化交通流量对比图表
        function initTrafficChart() {
            var chart = echarts.init(document.getElementById('trafficChart'));
            
            // 模拟数据
            var intersections = ['人民路-解放路', '中山路-建设路', '胜利路-和平路', '光明路-友谊路', '建设路-解放路'];
            var trafficData = [1234, 856, 1456, 678, 1123];
            var colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'];
            
            var option = {
                title: {
                    text: '实时车流量对比',
                    left: 'center',
                    textStyle: {
                        fontSize: 14,
                        color: '#333'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function(params) {
                        return params[0].name + '<br/>车流量: ' + params[0].value + ' 辆/小时';
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: intersections,
                    axisLabel: {
                        rotate: 45,
                        fontSize: 10
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '车流量(辆/小时)',
                    nameTextStyle: {
                        fontSize: 10
                    }
                },
                series: [{
                    name: '车流量',
                    type: 'bar',
                    data: trafficData.map((value, index) => ({
                        value: value,
                        itemStyle: {
                            color: colors[index]
                        }
                    })),
                    barWidth: '60%',
                    label: {
                        show: true,
                        position: 'top',
                        fontSize: 10
                    }
                }]
            };
            
            chart.setOption(option);
            
            // 响应式处理
            window.addEventListener('resize', function() {
                chart.resize();
            });
        }
        
        // 初始化流量趋势图表
        function initTrendChart() {
            var chart = echarts.init(document.getElementById('trendChart'));
            
            // 生成过去一小时的时间数据
            var times = [];
            var trafficFlow = [];
            var now = new Date();
            
            for (var i = 11; i >= 0; i--) {
                var time = new Date(now.getTime() - i * 5 * 60 * 1000);
                times.push(time.getHours() + ':' + (time.getMinutes() < 10 ? '0' : '') + time.getMinutes());
                trafficFlow.push(Math.floor(Math.random() * 200) + 800);
            }
            
            var option = {
                title: {
                    text: '流量趋势',
                    left: 'center',
                    textStyle: {
                        fontSize: 14,
                        color: '#333'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function(params) {
                        return params[0].name + '<br/>车流量: ' + params[0].value + ' 辆/小时';
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: times,
                    axisLabel: {
                        fontSize: 9,
                        rotate: 45
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '车流量',
                    nameTextStyle: {
                        fontSize: 10
                    }
                },
                series: [{
                    name: '车流量',
                    type: 'line',
                    data: trafficFlow,
                    smooth: true,
                    lineStyle: {
                        color: '#5470c6',
                        width: 2
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(84, 112, 198, 0.3)'
                            }, {
                                offset: 1, color: 'rgba(84, 112, 198, 0.1)'
                            }]
                        }
                    },
                    symbol: 'circle',
                    symbolSize: 4
                }]
            };
            
            chart.setOption(option);
            
            // 响应式处理
            window.addEventListener('resize', function() {
                chart.resize();
            });
        }
        
        // 更新实时数据
        function updateRealTimeData() {
            // 更新状态卡片数据
            var totalFlow = Math.floor(Math.random() * 500) + 1000;
            var avgSpeed = Math.floor(Math.random() * 20) + 35;
            var congestionIndex = (Math.random() * 2 + 1).toFixed(1);
            var signalCycle = Math.floor(Math.random() * 30) + 105;
            
            document.querySelector('.layui-text-blue').textContent = totalFlow.toLocaleString();
            document.querySelector('.layui-text-green').textContent = avgSpeed;
            document.querySelector('.layui-text-orange').textContent = congestionIndex;
            document.querySelector('.layui-text-red').textContent = signalCycle;
            
            // 更新图表数据
            var trafficChart = echarts.getInstanceByDom(document.getElementById('trafficChart'));
            if (trafficChart) {
                var newData = [];
                for (var i = 0; i < 5; i++) {
                    newData.push(Math.floor(Math.random() * 500) + 800);
                }
                trafficChart.setOption({
                    series: [{
                        data: newData.map((value, index) => ({
                            value: value,
                            itemStyle: {
                                color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'][index]
                            }
                        }))
                    }]
                });
            }
        }
    </script>
</body>
</html>
